<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Buttons</title>
  <meta name="description" content="You can use button tag or also anchor tag with role button">

  <link rel="stylesheet" href="buttons.css">
  <link rel="stylesheet" href="icons.css">

  <!--
    - This <style> and <link> is only used for the example preview,
    - it isn't needed for the real use case.
    -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-weight: lighter;
      color: #666;
      margin: -0.1rem 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 0.1rem #e8e8e8;
    }

    div.bb-docs {
      padding: 1rem;
    }

    div.bb-docs button, 
    div.bb-docs a[role="button"] {
      display: block;
    }

    div.bb-docs.dark {
      background: #000;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    body[role="application"] > [role="region"] {
      height: 100%;
      position: relative;
    }
  </style>
</head>
<body role="application">
  <h2 class="bb-docs">Default buttons</h2>
  <div class="bb-docs">
    <button>Default</button>
    <button class="theme-A">Theme A</button>
    <button class="theme-B">Theme B</button>
    <button class="theme-C">Theme C</button>
    <button class="theme-D">Theme D</button>
  </div>

  <h2 class="bb-docs">Large buttons</h2>
  <div class="bb-docs">
    <button class="large">Default</button>
    <button class="large theme-A">Theme A</button>
    <button class="large theme-B">Theme B</button>
    <button class="large theme-C">Theme C</button>
    <button class="large theme-D">Theme D</button>
  </div>

  <h2 class="bb-docs">Buttons with icons</h2>
  <div class="bb-docs">
    <button class="icon icon-delete text">Delete</button>
    <button class="icon icon-delete">Delete</button>
    <button class="icon icon-delete text large">Delete</button>
    <button class="icon icon-delete large">Delete</button>
  </div>

  <h2 class="bb-docs">Disabled buttons</h2>
  <div class="bb-docs">
    <button disabled>Default</button>
    <button class="theme-A" disabled>Theme A</button>
    <button class="theme-B" disabled>Theme B</button>
    <button class="theme-C" disabled>Theme C</button>
    <button class="theme-D" disabled>Theme D</button>
  </div>

</body>
</html>

